<template>
  <div class="middleContain">
    <el-carousel indicator-position="outside" height="450px" class="lunbo">
      <el-carousel-item v-for="(pageItem, index) in bookList" :key="index" class="book">
        <div class="bookinfo" v-for="(item, index) in pageItem" :key="index" @mouseenter="bookIntroHandle"
             @mouseleave="bookIntroHandles">
          <router-link :src="item.url" :title="item.name" width="115px" height="172px" class="bookImage"
                       :to="'/middle/bookInfo/'+item.id" tag="img"/>
          <router-link :to="'/middle/bookInfo/'+item.id" tag="h6" class="bookName">{{ item.name }}</router-link>
          <h6>{{ item.author }}</h6>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!--<div class="rightContain">-->
      <!--&lt;!&ndash;<img src="../../public/image/douban.jpg" width="300px" height="250px"/>&ndash;&gt;-->
    <!--</div>-->
  </div>
</template>
<script>
export default {
  name: 'middle',
  data () {
    return {
      // 图书信息数组
      bookList: [],
      // 是否将图书简介显示
      showBookIntro: true
    }
  },
  created () {
    this.getBooks()
  },
  methods: {
    // 获取图书信息
    getBooks () {
      this.axios.get('BookCrud/ListBook').then(res => {
        console.log(res.data)
        this.bookList = res.data
      })
    },
    // 鼠标移入将书的简介等信息显示出来
    bookIntroHandle () {
      this.showBookIntro = true
    },
    // 鼠标移入将书的简介等信息隐藏
    bookIntroHandles () {
      this.showBookIntro = false
    }
  }
}
</script>

<style scoped>
  .middleContain {
    display: flex;
  }
  .lunbo {
    width: 675px;
    margin: 0 200px;
  }

  .book {
    display: flex;
    flex-wrap: wrap;
  }

  .bookinfo:nth-child(5) {
    margin-right: 0;
  }

  .bookinfo:nth-child(10) {
    margin-right: 0;
  }

  .bookinfo {
    margin-right: 25px;
    position: relative;
  }

  .bookImage {
    cursor: pointer;
  }

  .bookName {
    cursor: pointer;
    color: #3377aa;
  }

  .bookIntro {
    width: 330px;
    height: 290px;
    position: absolute;
    top: -100px;
    left: 117px;
    background-color: red;
    z-index: 100;
  }

  h6 {
    font-size: 14px;
    width: 115px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /*.rightContain{*/
    /*width: 300px;*/
    /*height: 250px;*/
    /*background-image: url("../../public/image/douban.jpg");*/
    /*background-size: 300px 250px;*/
  /*}*/
</style>
<!--<style>-->
<!--.el-carousel__arrow&#45;&#45;left {-->
<!--width: 20px;-->
<!--height: 20px;-->
<!--position: absolute;-->
<!--left: 200px;-->
<!--top: -30px;-->
<!--background-color: green !important;-->
<!--}-->
<!--</style>-->
